import React, { useState } from 'react';
import { Row, Col, Input, Modal, Select, Button, message } from 'antd';
import { getUserInfo } from '../../../utils/Info';
import { post } from '../../../utils/requestUtil';
import ipPort from '../../../common/ipPort'
import moment from 'moment';
const { TextArea } = Input;

const globalStyle = {
	marginBottom: 20,
	maxWidth: 'none',
};
const titleStyle = {
	textAlign: 'left',
	borderLeft: '5px solid #1890FF',
	paddingLeft: '10px',
	fontSize: '20px',
	margin: '20px 0',
};
const contentStyle = {
	textAlign: 'center',
	padding: '30px 15px',
};
const leftStyle = {
	width: '100%',
	textAlign: 'left',
	padding: '0 15px',
};
const normalLeft = {
	textAlign: 'left',
	paddingBottom: 20,
	borderTop: '1px solid #eee',
};

function MessageComponent(props){
	const { messageDetail } = props;
	const list = messageDetail.replies && messageDetail.replies.map(e => (
		<div key={e.Id} style={{padding: "15px 0",width: '100%'}}>
			{' '}
			{e.content}
		</div>)
	);

	const [state, setState] = useState(messageDetail.state)
	const [content, setContent] = useState('')

	const submit = async () => {
		if (!content) {
			return message.error('回复内容不能为空！')
		}
		try {
			let userInfo = getUserInfo()
			let res = await post(ipPort + '/default/reply', {
				userId: userInfo.userId,
				username: userInfo.username,
				content: content.trim(),
				commentId: messageDetail.id,
				articleId: messageDetail.articleId,
				state,
				updateState: state !== messageDetail.state
			})
			if (res.success) {
				props.setMessageList(res.comments)
				message.success('回复成功')
				props.handleOk()
			} else message.success('回复失败')
		} catch (e) {
			message.error(`回复失败, ${e}`)
		}
   
	}

	const handleChange = (event) => {
		setContent(event.target.value)
	}

	const handleStateChange = (value) => {
		setState(value)
	}


	return (
	<div>
		<Modal
		title="留言详情与回复"
		visible={props.visible}
		onOk={props.handleOk}
		width="1000px"
		onCancel={props.handleCancel}
		>
		<Row style={normalLeft}>
			<div style={titleStyle}> 用户</div>
			<div style={leftStyle}>
				<div style={globalStyle}>
					用户名：{messageDetail.username}
				</div>
				<div style={globalStyle}>
					评论时间：{moment(messageDetail.createdAt).format('YYYY-MM-DD HH:mm:ss')}
				</div>
			</div>
		</Row>
		<Row style={normalLeft}>
			<div style={titleStyle}> 留言 </div>
			<div style={{padding: "15px 0",width: '100%'}}> {messageDetail.content}</div>
		</Row>
		<Row style={normalLeft}>
			<div style={titleStyle}> 回复内容 </div>
			{list || <div style={{padding: "15px 0",width: '100%'}}>暂无回复！</div>}
		</Row>
		<Row style={normalLeft}>
			<div style={titleStyle}> 添加回复</div>
			<TextArea
			size="large"
			placeholder="添加回复内容"
			name="content"
			value={content}
			onChange={handleChange}
			/>
			<Select
			style={{ width: 300, marginTop: 20, marginBottom: 20 }}
			placeholder="选择状态"
			defaultValue={state === '1' ? '已处理' : '未处理'}
			onChange={handleStateChange}
			>
			<Select.Option value="0">未处理</Select.Option>
			<Select.Option value="1">已处理</Select.Option>
			</Select>
			<div>
			<Button style={{ marginTop: 20 }} onClick={submit} type="primary">
				提交回复
			</Button>
			</div>
		</Row>
		</Modal>
	</div>
	);
	
}

export default MessageComponent;
